<template>
  <!-- 首页 热门推荐组件 -->
  <div>
    <!-- 插槽 -->
    <slot name="title" :cates="cates"></slot>

    <!-- 热门推荐内容 -->
    <ul class="hot-cate">
      <li
        class="hot-cate-item"
        v-for="(hc, i) in hotCates"
        :key="i"
        @click="cateClickHandler(hc)"
      >
        <el-tooltip effect="dark" :content="hc.title" placement="top">
          <div class="hot-cate-img">
            <img :src="hc.icon" alt="" />
          </div>
        </el-tooltip>
        <div class="hot-cate-title">{{ hc.title }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  name: "HotCate",
  data() {
    return {
      cates: ["流行", "摇滚", "民谣", "电子", "影视"],
      hotCates: [
        {
          icon: "https://img01.dmhmusic.com/0412/M00/85/FB/ChAKEl-OgZ6AEV99AAxFbPaH91c022.jpg@w_300,h_300",
          title: "重阳节 | 家的避风港湾",
        },
        {
          icon: "https://img01.dmhmusic.com/0209/M00/43/F0/ChR47GLyBvyAMIYbAAFa29H186g672.jpg@w_300,h_300",
          title: "这里有一份音乐节歌单，请查收！",
        },
        {
          icon: "https://img01.dmhmusic.com/0513/M00/02/8C/ChAKE2MPCByAIwH1AAPdGsL6iMg397.jpg@w_300,h_300",
          title: "秋天，是思念的季节",
        },
        {
          icon: "https://img01.dmhmusic.com/0207/M00/45/2C/ChR47Fqiax6AYSedABdav4ajFzg594.jpg@w_300,h_300",
          title: "林俊杰 | 行走的CD机",
        },
        {
          icon: "https://img01.dmhmusic.com/0513/M00/20/03/ChAKE2Mpl8mAX8n-AAzZgqUfZK4991.jpg@w_300,h_300",
          title: "我心向党 | 永远跟党走",
        },
        // {
        //   icon: "https://img01.dmhmusic.com/0208/M00/7B/C1/ChR461z_WDSAO4rGAADElrSh5-s077.jpg@w_300,h_300",
        //   title: "独立摇滚 | 城市漫游记",
        // },
        // {
        //   icon: "https://img01.dmhmusic.com/0513/M00/00/AB/ChAKE2MIejyAfckUAAdB9oqSsN4942.jpg@w_300,h_300",
        //   title: "华语女声｜你的名字被我唱成一首歌",
        // },
        // {
        //   icon: "https://img01.dmhmusic.com/0103/M00/D4/BC/ChR45GJ6D8aAFuHnAAcOiDrVfxQ852.jpg@w_300,h_300",
        //   title: "许嵩 | 音乐才子的诗意江湖",
        // },
        // {
        //   icon: "https://img01.dmhmusic.com/0103/M00/D9/A6/ChR45GKF7f6AFo1rABDTjc3LMts057.jpg@w_300,h_300",
        //   title: "太合音乐 | 第33届金曲奖入围名单",
        // },
        // {
        //   icon: "https://img01.dmhmusic.com/0105/M00/F4/E7/ChR45WLozVGAPtn8AAS7SsfXbl0333.jpg@w_300,h_300",
        //   title: "浪漫七夕｜听见音乐说爱你",
        // },
      ],
    };
  },
  computed: {
    /* 获取音乐数据 */
    ...mapState("music", ["musicData"]),
  },
  methods: {
    /* 弹出层操作方法 */
    ...mapMutations("music", ["TOASTOPERA"]),

    /* 点击热门推荐歌单业务处理 */
    cateClickHandler({ title }) {
      this.TOASTOPERA({
        toastShow: true,
        toastData: this.musicData,
        title,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.hot-cate {
  display: flex;
  overflow: hidden;
  justify-content: space-between;
  .hot-cate-item {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    margin-right: 0.3rem;
    &:last-child {
      margin-right: 0rem;
    }
    &:hover .hot-cate-title {
      color: #ffcff1;
    }
    .hot-cate-img {
      height: 3rem;
      width: 3rem;
      border-radius: 00.1rem;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .hot-cate-title {
      margin-top: 0.1rem;
      width: 3rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
@media screen and (min-width: 556px) and (max-width: 917px) {
  .hot-cate {
    .hot-cate-item {
      .hot-cate-img {
        height: 2.5rem;
        width: 2.5rem;
      }
      .hot-cate-title {
        width: 2.5rem;
      }
    }
  }
}
</style>